<template>
<div class="car-summary">

    <h1 class="vehicleName title">
        {{data.vehicleName}}
    </h1>

    <div class="content">
        <Row>
            <Col v-for='(item, index) of contentConf' :span='item.span' :key='item.key'>
                <div class="item">
                     <span class="label">
                        {{item.label}}
                    </span>
                    <span class="val">
                        {{data[item.key]}}
                    </span>
                </div>
            </Col>
        </Row>
    </div>
    
</div>
</template>

<script lang='ts'>
import {Component, Prop, Vue} from 'vue-property-decorator'


interface data {
    carModel,
    index:number
}

@Component({})
export default class carSummary extends Vue{
    name:string = 'carSummary'

    @Prop()
    data:data

    contentConf = [
        // {
        //     label: '车型名称',
        //     span: 24,
        //     key: 'vehicleName'
        // },
        {
            label: '上市年份',
            span: 8,
            key: 'releaseYear'
        },
        {
            label: '车身价',
            span: 12,
            key: 'price'
        },
        {
            label: '排量',
            span: 8,
            key: 'engineCapability'
        },
        {
            label: '载重',
            span: 8,
            key: 'tonnages'
        },
        {
            label: '座位',
            span: 8,
            key: 'seats'
        },
        
        
    ]
        
}



</script>

<style scoped lang='scss'>

// 表格选中状态下 样式
 .ivu-table-row-highlight div{
    color: $font_light_color;
    .title{
        color: #000;
    }
}

.car-summary{
    padding: _intervals() 0 _rem(6px);

   
    
    .title{
        font-size: $font_md;
        margin-bottom: _rem(6px);
        border-radius: $border_radius;
        background: $default_bg;
        // color: $font_light_color;
        font-weight: 400;
    }

    .item{
        display: flex;
        align-items: center;
        padding:  _rem(6px) 0;
    }

    .label{
        $size: _rem(60px);
        overflow: hidden;
        display: inline-block;
        
        flex: 0 $size;
        width: $size;
        color: $font_secondary;
    }
    .val{
        display: inline-block;
    }
    

}



</style>